import React from "react";

interface NewPersonProps {
    data: NewMsg;
    scrollBottom: () => void;
}

function NewPerson(props: NewPersonProps) {

    const { user, date, isSelf, isLeave } = props.data;
    const scrollBottom = props.scrollBottom;

    React.useEffect(() => {
        scrollBottom();
    },[scrollBottom]);

    return (
        <div className="username-msg mt-2 mb-2" style={{ fontSize: ".8rem" }}>
            <div className="pt-1 pb-1 bg-gray text-center text-dark" style={isSelf ? { color: 'red' } : {}}>
                <span className="p-2 bg-light" style={{ borderRadius: '6px' }}>

                    {typeof user === "object" && user[1] ? 
                        (
                            <>
                                <span className={isSelf ? "" : "text-danger"}>{isSelf ? "你" : user[1]}</span>
                                <span className="pl-2 pr-2">将昵称修改为：
                                    <span className="text-danger">{user[0]}</span>  --
                                </span>
                                <span>{date}</span>
                            </>
                        ) : 
                        (
                            <>
                                <span className="text-danger">{user}</span>
                                <span className="pl-2 pr-2">
                                    <span className="text-info">{isLeave ? "离开" : "进入"}</span>
                                    了房间 --
                                </span>
                                <span>{date}</span>
                            </>
                        )
                    }
                    
                </span>
            </div>
        </div>
    );
}

export default NewPerson;